<template>
  <a-space wrap>
    <div w-80px text-12px :class="{active:index === active}" @click="handleClickBox(item, index)" cursor-pointer hover:bg-gray-3 h-80px bg-gray-100
      text-center line-height-80px v-for="(item, index) in list" :key="index">
      {{ item.label }}
    </div>
  </a-space>
</template>

<script setup lang="ts">
import { ref } from "vue"

interface List {
  label: string,
  value: string,
  icon?: string
}

// 禁止修改label的值
const list: Array<List> = [
  // 链接列表
  {
    label: "首页",
    icon: "md-home",
    value: "home",
  },
  {
    label: "购物车",
    icon: "md-cart",
    value: "cart",
  },
  {
    label: "收藏商品",
    icon: "md-heart",
    value: "collection",
  },
  {
    label: "我的订单",
    icon: "md-document",
    value: "order",
  },
  {
    label: "个人中心",
    icon: "md-person",
    value: "user",
  },
  {
    label: "拼团频道",
    icon: "md-flame",
    value: "group",
  },
  {
    label: "秒杀频道",
    icon: "md-flame",
    value: "seckill",
  },
  {
    label: "领券中心",
    icon: "md-pricetag",
    value: "coupon",
  },
  {
    label: "签到",
    icon: "md-happy",
    value: "sign",
  },
  {
    label: "小程序直播",
    icon: "ios-videocam",
    value: "live",
  },
  {
    label: "砍价",
    icon: "md-share-alt",
    value: "kanjia",
  },
  {
    label: "积分商城",
    icon: "ios-basket",
    value: "point",
  },
]
const active = ref<String | number>('')
const emit = defineEmits(['selectTableChange'])
function handleClickBox(val: List, index: number) {
  active.value = index
  emit('selectTableChange', {...val,___type:'other'})

}

</script>

<style scoped>
.active{
  background: #d1d5db;
}
</style>
